<template>
  <div class="agent-list">
    <h2>置业顾问</h2>
    <el-form label-width="80px" :model="ruleForm" :inline="true" ref="ruleForm">
     <template v-for="(agent,index) in ruleForm.overSeaAdviserList">
        <el-row class="agent-box">
          <el-form-item label="姓名" :prop="'overSeaAdviserList.' + index + '.realName'" :rules="ruleAgentName">
            <el-input v-model.trim="agent.realName" maxlength="10" placeholder="请填写置业顾问姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话号码" :prop="'overSeaAdviserList.' + index + '.tel'" :rules="ruleAgentTel">
            <el-input maxlength="11" v-model.trim="agent.tel" placeholder="请填写置业顾问电话号码"></el-input>
            <el-button v-if="index==0 && ruleForm.overSeaAdviserList.length<10" @click="addAgent">继续添加</el-button>
            <span v-if="index==0">若为座机，请携带区号，例如02164728123</span>
            <el-button v-if="index>0" @click.prevent="removeAgent(agent)">移除</el-button>
          </el-form-item>
        </el-row>
      </template>
    </el-form>
    <el-button  type="primary" @click="saveSales('ruleForm')">保存</el-button>
  </div>
</template>
<script>
import { getToken } from '@/utils/auth'

import {
  saveSales,
  getSalesList
} from '@/api/overseas'


export default {
  props: {
    communityId: {
      type: String
    },
  },
  data() {
    return {
      ruleForm:{overSeaAdviserList :[]},
      ruleAgentName:[{required: true, message: '置业顾问姓名不能为空', trigger: 'blur'}],
      ruleAgentTel:[{required: true, message: '置业顾问电话号码不能为空', trigger: 'blur'},{pattern:  /^((0\d{2,3}\d{7,8})|(1\d{10}))$/, message: '请输入正确的电话号码',trigger: 'blur'}],
    };
  },
 watch: {
    // ruleForm: {
    //   handler(n,o){
    //     this.$emit('getIsSave',false);
    //   },
    //   deep: true  // 可以深度检测到 person 对象的属性值的变化
    // }
  },
  mounted(){
    this.loading = this.$loading({
         lock: true,
         text: 'Loading',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
    });
    this.getSalesList()
  },

  methods: {
    // 获取置业顾问列表
    getSalesList(){
      getSalesList(this.communityId).then(res => {
          this.loading.close();
          this.ruleForm.overSeaAdviserList = res.data.length>0? res.data : [{realName: "",tel:""}]
      })
    },
    // 添加置业顾问
    addAgent() {
      this.ruleForm.overSeaAdviserList.push({
        realName: '',
        tel: ''
      });
    },
    // 移除置业顾问
    removeAgent(item) {
      var index = this.ruleForm.overSeaAdviserList.indexOf(item)
      if (index !== -1) {
        this.ruleForm.overSeaAdviserList.splice(index, 1)
      }
    },
    // 保存置业顾问
    saveSales(formName){
      let list = this.ruleForm.overSeaAdviserList;
      this.$refs[formName].validate((valid) => {
         if (valid) {
           saveSales({communityId: this.communityId,adviserList: list}).then(res => {
             this.$message({
               type: 'success',
               message: '保存成功!'
             });
             this.getSalesList()
           })
         }else{
            this.$alert('保存草稿失败，请根据输入框引导提示，填写所有带*号内容后再提交', '提示', {
              confirmButtonText: '确定',
              callback: action => {}
            })
         }
      })
    },
  }
};
</script>

<style lang="scss" scoped>
.agent-list .el-input{
    width:200px;
  }
</style>
